<template>
  <div class="overdueData_box">
    <h3 class="overdueData_box_title">{{ $t("m.Yúqíshùjù") }}</h3>

    <div class="overdueData_box_bill">
      <div class="overdueData_box_bill_select">
      <div class="items">
        <div class="label">{{$t('m.selectLt')}}</div>
        <DatePicker type="daterange" :value="overdueDataTimeDefault" format="yyyy-MM-dd" :options="repaymentDate" @on-change="overdueDataTimeChange" v-bind:placeholder="$t('m.selectLt')"></DatePicker>
      </div>
      <div class="items">
        <div class="label">{{$t('m.cuīshōujiēduàn')}}</div>
        <Select v-model="overdueDataStage" v-bind:placeholder="$t('m.cuīshōujiēduàn')">
          <Option :value="''">{{ $t("m.entire") }}</Option>
          <Option :value="'s0'">S0 {{ $t("m.bill") }}</Option>
          <Option :value="'s1'">S1 {{ $t("m.bill") }}</Option>
          <Option :value="'s2'">S2 {{ $t("m.bill") }}</Option>
          <Option :value="'m2'">M1 {{ $t("m.bill") }}</Option>
          <Option :value="'m3'">M2 {{ $t("m.bill") }}</Option>
          <Option :value="'bad'">{{ $t("m.huàizhàngzhàngdān") }}</Option>
        </Select>
      </div>
        <Button type="primary" @click="exportData" style="float: right;">
          <Icon type="ios-download-outline"></Icon>
          {{ this.$t("m.exportData") }}
        </Button>
      </div>
      <h4 class="overdueData_box_bill_title">{{ $t("m.yúqíqíngkuàng") }}</h4>
      <div class="overdueData_box_bill_table">
        <Table border :columns="overdueDataBillTable" :data="overdueDataBillTableList" size="small" ref="tables"></Table>
      </div>
    </div>
    <div class="overdueData_box_personnel">
      <h4 class="overdueData_box_personnel_title">{{ $t("m.yúqíxiángqíng") }}</h4>
      <div class="overdueData_box_personnel_table">
        <Table border :columns="overdueDataPersonnelTable" :data="overdueDataPersonnelTableList" size="small" ref="table"></Table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'overdueData',
  data () {
    return {
      overdueDataStage: '',
      overdueDataTimeStart: '',
      overdueDataTimeEnd: '',
      overdueDataTimeDefault: [],
      overdueDataBillTable: [{
        "title": this.$t('m.dàoqíbǐshù'),
        'key': 'maturityNum',
        "align": 'center',
        "width": '250px',
        "sortable": true,
      },
      {
        "title": this.$t('m.dàoqíjīné'),
        'key': 'maturityAmount',
        "sortable": true,
        "align": 'center',
      },
      {
        "title": this.$t('m.yúqíwèiháibǐshù'),
        'key': 'overdueNotRepayNum',
        "sortable": true,
        "align": 'center',
      },
      {
        "title": this.$t('m.yúqíwèiháijīné'),
        'key': 'overdueNotRepayAmount',
        "sortable": true,
        "align": 'center',
      },
      {
        "title": this.$t('m.shǒuyúlǜ'),
        'key': 'firstOverdueRate',
        "sortable": true,
        "align": 'center',
      },
      {
        "title": this.$t('m.yúqíwèiháilǜ'),
        'key': 'overdueNotRepayRate',
        "sortable": true,
        "align": 'center',
      },
      {
        "title": this.$t('m.zījīncuīhuílǜ'),
        'key': 'amountPushBackRate',
        "sortable": true,
        "align": 'center',
      },
      ],
      overdueDataPersonnelTable: [{
        "title": this.$t('m.lèixíng'),
        "key": "stage",
        "align": 'center'
      },
      {
        "title": this.$t('m.yúqíwèiháibǐshù'),
        'key': 'overdueNotRepayNum',
        "sortable": true,
        "align": 'center',
      },
      {
        "title": this.$t('m.yúqíwèiháijīné'),
        'key': 'overdueNotRepayAmount',
        "sortable": true,
        "align": 'center',
      },
      {
        "title": this.$t('m.yúqíwèiháilǜ'),
        'key': 'overdueNotRepayRate',
        "sortable": true,
        "align": 'center',
      },
      {
        "title": this.$t('m.zījīncuīhuílǜ'),
        'key': 'amountPushBackRate',
        "sortable": true,
        "align": 'center',
      }
      ],
      overdueDataBillTableList: [],
      overdueDataPersonnelTableList: [],
      repaymentDate: {
        disabledDate (date) {
          return date && date.valueOf() > Date.now();
        }
      },
    }
  },
  components: {},
  props: {},
  watch: {
    overdueDataStage () {
      this.PersonnelTableQuery()
      this.BillTableListQuery()
    },
  },
  methods: {
    PersonnelTableQuery () {
      let param = {},
        query = '';
      param.startTime = this.overdueDataTimeStart,
        param.endTime = this.overdueDataTimeEnd,
        param.stage = this.overdueDataStage
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      var url = `/api/laocai/report/overdue/stat?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          if (res.body.result) {
            this.overdueDataBillTableList = res.body.result
            this.overdueDataBillTableList.forEach(element => {
              element.maturityNum = element.maturityNum == null ? '0' : element.maturityNum
              element.maturityAmount = element.maturityAmount == null ? '0' : element.maturityAmount
              element.overdueNotRepayNum = element.overdueNotRepayNum == null ? '0' : element.overdueNotRepayNum
              element.overdueNotRepayAmount = element.overdueNotRepayAmount == null ? '0' : element.overdueNotRepayAmount
              element.firstOverdueRate = element.firstOverdueRate == null ? '0%' : element.firstOverdueRate + '%'
              element.overdueNotRepayRate = element.overdueNotRepayRate == null ? '0%' : element.overdueNotRepayRate + '%'
              element.amountPushBackRate = element.amountPushBackRate == null ? '0%' : element.amountPushBackRate + '%'
            });            
          }
        }
        // this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },
    BillTableListQuery () {
      let param = {},
        query = '';
      param.startTime = this.overdueDataTimeStart,
        param.endTime = this.overdueDataTimeEnd,
        param.stage = this.overdueDataStage
      Object.keys(param).forEach((item, index) => {
        if (param[item]) {
          query += `${index === 0 ? '' : '&'}${item}=${param[item]}`;
        }
      });
      var url = `/api/laocai/report/overdue/info?${query}`
      this.$http.get(url).then((res) => {
        if (res.body.code == 0) {
          this.overdueDataPersonnelTableList = res.body.result
          this.overdueDataPersonnelTableList.forEach(element => {
            if (element.stage == 'bad') {
              element.stage = element.stage + "    (" + this.$t('m.overdueDay') + "  " + element.minOverdueDays + "~~" + ")"
            } else {
              element.stage = element.stage + "    (" + this.$t('m.overdueDay') + "  " + element.minOverdueDays + "~" + element.maxOverdueDays + ")"
            }
            element.overdueNotRepayNum = element.overdueNotRepayNum == null ? '0' : element.overdueNotRepayNum
            element.overdueNotRepayAmount = element.overdueNotRepayAmount == null ? '0' : element.overdueNotRepayAmount
            element.overdueNotRepayRate = element.overdueNotRepayRate == null ? '0%' : element.overdueNotRepayRate + '%'
            element.amountPushBackRate = element.amountPushBackRate == null ? '0%' : element.amountPushBackRate + '%'
          });
        }
        this.$Message.success(this.$t('m.errorCode' + res.body.code));
      });
    },

    overdueDataDateEvent () {
      var d = new Date();
      let y = d.getFullYear(); // 年份
      let m = (d.getMonth() + 1).toString().padStart(2, '0'); // 月份
      let r = d.getDate().toString().padStart(2, '0'); // 日子
      let h = d.getHours().toString().padStart(2, '0'); // 小时 
      let mm = d.getMinutes().toString().padStart(2, '0'); // 分钟
      let ss = d.getSeconds().toString().padStart(2, '0'); // 秒
      this.overdueDataTimeEnd = `${y}-${m}-${r}`; // es6 字符串模板
      this.overdueDataTimeStart = `${y}-${m}-${r}`;
      this.overdueDataTimeDefault = [`${y}-${m}-${r}`, `${y}-${m}-${r}`]
      // this.repayForm.repayDate = this.hksjsaleDate
    },
    // 选择时间
    overdueDataTimeChange (e) {
      if (!e[0]) {
        // this.overdueDataTimeStart = '';
        this.overdueDataDateEvent()
      } else {
        this.overdueDataTimeStart = e[0];
        this.overdueDataTimeEnd = e[1];
      }

      this.PersonnelTableQuery()
      this.BillTableListQuery()
    },
    // 导出用户数据汇总Excel
    exportData (type) {
      this.$refs.table.exportCsv({
        filename: this.$t('m.cuīshōurényuántǒngjì'),
        // columns:this.overdueDataPersonnelTable,
        // data:this.overdueDataPersonnelTableList
      });
      this.$refs.tables.exportCsv({
        filename: this.$t('m.yúqíqíngkuàng'),
        // columns:this.overdueDataPersonnelTable,
        // data:this.overdueDataPersonnelTableList
      });
    },
  },
  filters: {},
  computed: {},
  created () {
    this.overdueDataDateEvent()
    this.PersonnelTableQuery()
    this.BillTableListQuery()
  },
  mounted () { },
  destroyed () { }
}
</script>

<style lang="scss">
  @import "./styles/common.scss";
      .items {
      display: inline-block;
      margin-bottom: 10px;
      margin-right: 20px;
      width: 200px;
      .label {
        overflow: hidden;
        white-space: inherit;
        text-align: right;
        color: #222;
        font-size: 14px;
        margin-right: 10px;
      }
    }

.overdueData_box {
  margin: 0 15px;
}

.overdueData_box_bill_select {
  display: block;
  width: 100%;
}

.overdueData_box_title {
    color: #515a6e;
    padding: 0 15px;
    font-size: 16px;
    font-weight: bold;
    line-height: 75px;
}
.overdueData_box_personnel{
  margin: 20px 0;
}
.overdueData_box_bill_title,
.overdueData_box_personnel_title {
  color: #515a6e;
  font-size: 14px;
  font-weight: bold;
  line-height: 50px;
  clear: both;
}

.ivu-form-control {
  margin-right: 10px;
  margin-bottom: 10px;
  width: 250px;
  float: left;
}
.bill_box_poptip {
  float: right;
  position: relative;
  /* top: -10px; */
  right: 20px;
  background: #666;
  border-radius: 50%;
}
.overdueData_box .ivu-poptip-body {
  background: rgba(70, 70, 70, 0.8);
}
</style>